<template>
  <div class="ld">
    <LLMDialog
      v-model="prompt"
      :visible="ld1.visible"
      :theme="ld1.theme"
      :messages="ld1.messages"
      :files="ld1.files"
      @send="handleSend"
      @stop="handleStop"
      @theme="handleThemeChange"
      @upload-files="handleUploadFiles"
      @delete-file="handleDeleteFile"
      @clear-files="handleClearFiles"
    />
  </div>
</template>

<script setup lang="ts" name="App">
import LLMDialog from './components/LLMDialog.vue'
import testStr from '@/__test__/text?raw'
import { ref, reactive } from 'vue'
import { ld } from './llmDialog'

const prompt = ref('')

const ld1 = reactive({
  visible: true,
  theme: 'light' as const,
  messages: [
    ld.createUserMessage('欢迎使用大模型对话框！'),
    ld.createLLMMessage('测试环境，请发送任意消息查看输出过程'),
  ],
  files: [
    ld.createFile(new File(['foo'], 'test.txt', { type: 'text/plain' })),
    ld.createFile(new File(['bar'], 'example.txt', { type: 'text/plain' })),
  ],
  maxFileCount: 5,
  maxPerFileSize: 10 * 1024 * 1024, // 10MB
  maxTotalFileSize: 50 * 1024 * 1024, // 50MB
})

function splitStringByLength(str: string, length: number) {
  const result = []
  for (let i = 0; i < str.length; i += length) {
    result.push(str.substring(i, i + length))
  }
  return result
}

const chunks = splitStringByLength(testStr, 5)
const iter = chunks[Symbol.iterator]()

const handleSend = (
  text: string,
  files: File[],
  append: (text: string) => void,
  done: () => void,
) => {
  console.log('发送消息:', text, files)
  const sitv = setInterval(() => {
    const { value, done: isEnd } = iter.next()
    if (isEnd) {
      done()
      return
    }
    append(value)
  }, 100)
  // setTimeout(() => {
  //   done()
  //   clearInterval(sitv)
  // }, 3000);
}

const handleStop = () => {
  console.log('停止接收')
}

const handleThemeChange = (newTheme: string, oldTheme: string) => {
  console.log('主题切换:', newTheme, '从', oldTheme, '到', newTheme)
}

const handleUploadFiles = (files: FileList) => {
  console.log('上传文件:', files)
}

const handleDeleteFile = (file: File) => {
  console.log('删除文件:', file)
}

const handleClearFiles = (files: File[]) => {
  console.log('清空文件列表:', files)
}
</script>

<style>
body {
  margin: 0;
  padding: 0;
}

.ld {
  width: 100vw;
  height: 100vh;
}
</style>
